<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级成绩分析</title>

    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E40AF',
                        secondary: '#3B82F6',
                        neutral: '#F1F5F9',
                        success: '#059669',
                        warning: '#D97706',
                        danger: '#DC2626'
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 min-h-screen p-4 md:p-6">
<!-- 顶部区域 -->
<div class="mb-6">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-xl md:text-2xl font-bold text-gray-800">高三(2)班成绩分析</h1>
            <p class="text-gray-600 mt-1">本次测验整体表现良好，继续保持！</p>
        </div>
        <div class="bg-blue-50 border border-blue-100 rounded-lg p-3 text-sm text-gray-700 flex items-center max-w-xs">
            <i class="fa fa-coffee text-amber-600 mr-2"></i>
            老师您辛苦了，批改间隙记得喝口水休息一下
        </div>
    </div>
</div>

<!-- 核心数据卡片 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-lg shadow-sm p-4 transition-all hover:shadow-md">
        <div class="text-gray-500 text-sm mb-1">班级平均分</div>
        <div class="text-2xl font-bold text-gray-800">82.5</div>
        <div class="text-success text-xs mt-2 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 较上次提升1.2分
        </div>
    </div>
    <div class="bg-white rounded-lg shadow-sm p-4 transition-all hover:shadow-md">
        <div class="text-gray-500 text-sm mb-1">优秀率(90分以上)</div>
        <div class="text-2xl font-bold text-gray-800">28%</div>
        <div class="text-success text-xs mt-2 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 提升5个百分点
        </div>
    </div>
    <div class="bg-white rounded-lg shadow-sm p-4 transition-all hover:shadow-md">
        <div class="text-gray-500 text-sm mb-1">待批改试卷</div>
        <div class="text-2xl font-bold text-gray-800">12</div>
        <div class="text-gray-500 text-xs mt-2 flex items-center">
            <i class="fa fa-clock-o mr-1"></i> 进度80%，即将完成
        </div>
    </div>
    <div class="bg-white rounded-lg shadow-sm p-4 transition-all hover:shadow-md">
        <div class="text-gray-500 text-sm mb-1">需重点关注学生</div>
        <div class="text-2xl font-bold text-gray-800">3名</div>
        <div class="text-warning text-xs mt-2 flex items-center">
            <i class="fa fa-exclamation-circle mr-1"></i> 建议课后辅导
        </div>
    </div>
</div>

<!-- 图表区域 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- 分数分布图表 -->
    <div class="bg-white rounded-lg shadow-sm p-4 md:p-5">
        <div class="flex items-center mb-4">
            <i class="fa fa-bar-chart text-primary mr-2"></i>
            <h2 class="font-medium text-gray-800">分数段分布</h2>
        </div>
        <div class="h-64 md:h-72">
            <canvas id="scoreDistributionChart"></canvas>
        </div>
    </div>

    <!-- 各科目平均分对比 -->
    <div class="bg-white rounded-lg shadow-sm p-4 md:p-5">
        <div class="flex items-center mb-4">
            <i class="fa fa-line-chart text-primary mr-2"></i>
            <h2 class="font-medium text-gray-800">科目平均分对比</h2>
        </div>
        <div class="h-64 md:h-72">
            <canvas id="subjectsComparisonChart"></canvas>
        </div>
    </div>
</div>

<!-- 温馨提示卡片 -->
<div class="bg-indigo-50 border border-indigo-100 rounded-lg p-4">
    <div class="flex">
        <div class="flex-shrink-0">
            <i class="fa fa-heart text-indigo-500 mt-0.5"></i>
        </div>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-indigo-800">老师，您辛苦了</h3>
            <div class="mt-2 text-sm text-indigo-700">
                <p>这次批改任务量不小，您已经连续工作一段时间了。适当放松一下，看看窗外或者闭目养神几分钟，再继续会更有效率哦。同学们都很感谢您的辛勤付出！</p>
            </div>
        </div>
    </div>
</div>

<script>
    // 分数分布图表
    const scoreDistributionCtx = document.getElementById('scoreDistributionChart').getContext('2d');
    new Chart(scoreDistributionCtx, {
        type: 'bar',
        data: {
            labels: ['60以下', '60-69', '70-79', '80-89', '90-100'],
            datasets: [{
                label: '学生人数',
                data: [2, 5, 12, 18, 8],
                backgroundColor: [
                    '#DC2626',
                    '#FBBF24',
                    '#3B82F6',
                    '#60A5FA',
                    '#059669'
                ],
                borderRadius: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: '#F1F5F9' },
                    title: { display: true, text: '学生人数' }
                },
                x: {
                    grid: { display: false },
                    title: { display: true, text: '分数段' }
                }
            }
        }
    });

    // 科目对比图表
    const subjectsComparisonCtx = document.getElementById('subjectsComparisonChart').getContext('2d');
    new Chart(subjectsComparisonCtx, {
        type: 'radar',
        data: {
            labels: ['语文', '数学', '英语', '物理', '化学', '生物'],
            datasets: [{
                label: '本班平均分',
                data: [85, 79, 88, 76, 81, 84],
                backgroundColor: 'rgba(30, 64, 175, 0.2)',
                borderColor: '#1E40AF',
                pointBackgroundColor: '#1E40AF'
            }, {
                label: '年级平均分',
                data: [82, 75, 83, 72, 78, 80],
                backgroundColor: 'rgba(156, 163, 175, 0.2)',
                borderColor: '#9CA3AF',
                pointBackgroundColor: '#9CA3AF'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                r: {
                    min: 60,
                    max: 100,
                    ticks: { stepSize: 10 },
                    grid: { color: '#F1F5F9' }
                }
            }
        }
    });
</script>
</body>
</html>
